import { useState,useEffect } from "react";
/**
 * useEffect 清除副作用
 * 【说明】：清除副作用就是在组件在卸载时清除useEffect内部的操作、例如定时器，取消网络请求、移除事件监听等
 */

let Son = () => {
  useEffect(() => {
    let time = setInterval(() => {
      console.log("清除副作用");
    }, 1000)

    // 在组件卸载时，会自动执行、通过return一个回调函数清除副作用，也就是清除定时器
    return () => {  
      clearInterval(time)
       console.log("定时器已清除！！！");
    }
  }, [])
  return (
    <div>Hello React useEffect</div>
  )
}
function useEffectBy() {
  let [show, setShow] = useState(true)

  return (
    <div>
      {show && <Son></Son>}
      <button onClick={() => setShow(!show)}>清除副作用</button>
    </div>
  )
}

export default useEffectBy